<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
    <style>
        /* v-cloak 在html属于标签内的自定义属性 */
        [v-cloak]{
            display: none;
        }
        p{
            width: 100px;
            height: 100px;
            background-color: #6ff;
            margin: 50px;
        }
    </style>
</head>

<body>
    <!-- 视图层 -->
    <div id="app" v-cloak>
        <!-- 标签内的属性: 官方属性  用户自定义属性data-xxx -->

        <!-- 静态属性 -> 属性值已经固定,都是字符串类型 -->
        <!-- <p class="one" id="first" title="hello" data-index="0">11111</p> -->
        <!-- <p style="color: red;text-align: center;line-height: 100px;">111111</p> -->
        
        <!-- 动态属性 -> 将Vue实例中的数据,放到标签内,作为标签内某个属性的属性值 (v-bind指令的值期望是一个javascript表达式,可以使用Vue实例中的数据 -> 将表达式的结果作为标签内某个属性的属性值) -->

        <!-- 字符串 -->
        <!-- <p v-bind:style="styleStr">111111</p>  -->
        
        <!-- 对象 -->
        <!-- <p v-bind:style="styleObj">2222222</p> 
        <p v-bind:style="{color:'red',textAlign:'center','line-height':'100px',fontSize: isActive ? '24px':'16px'}">2222222</p>  -->
        
        <!-- 数组 -->
        <!-- <p v-bind:style="styleList">333333</p>  -->


        <p :style="styleStr">111111</p> 

        <p :style="styleObj">2222222</p> 
        <p :style="{color:'red',textAlign:'center','line-height':'100px',fontSize: isActive ? '24px':'16px'}">2222222</p>
        <p :style="styleList">333333</p> 
        
        
    </div>
</body>
<script>
    
    // 指令:
    // 指令 (Directives) 是带有 v- 前缀的特殊 attribute。指令 attribute 的值预期是单个 JavaScript 表达式 (v-for 是例外情况，稍后我们再讨论)。指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM

    // 指令:用于标签内, 作为标签内的自定义属性  => Vue在将模版解析为虚拟DOM时会处理 Vue中的自定义属性

    // 注意:
    // 1. 指令 (Directives) 是带有v-前缀的特殊属性 => Vue中的自定义属性
    // 2. 指令属性的值预期是单个 JavaScript 表达式
    // 3. 当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM

    // 常见指令:
    // v-html  => 在元素中输出html结构(会覆盖元素原本的内容)
    // v-text  => 在元素中输出文本结构(会覆盖元素原本的内容)
    // v-pre   => 在元素内禁用文本插值语法
    // v-cloak 等页面编译完毕再展示视图  (配合css使用)

    // v-if  条件渲染  => 根据指令的值决定元素是否渲染  true => 渲染  false=> 不渲染
    // v-show 条件展示 => 不管条件成立与否,元素都会渲染, 如果表达式结果为true,元素就会显示(display:block),false=>元素就会隐藏(display:none)

    // v-bind 属性绑定 =>  响应式地更新html属性  => 将Vue实例中的数据,放到标签内,作为标签内某个属性的属性值 (操作元素,改变元素的属性值)
    //    a:   v-bind:参数="指令值"    => 单个绑定  参数名:需要绑定的属性名   指令的值: 绑定的属性值
    //         可以简写为  :参数="指令值"

    //    b:   v-bind = "指令值"       => 批量绑定  指令的值是一个对象 (对象的键名:就是需要绑定的属性名,对象的键值:就是需要绑定的属性值)
    //         此写法不能简写

    // class 和 style绑定: 操作元素的 class 列表和内联样式是数据绑定的一个常见需求。因为它们都是 attribute，所以我们可以用 v-bind 处理它们：只需要通过表达式计算出字符串结果即可。不过，字符串拼接麻烦且易错。因此，在将 v-bind 用于 class 和 style 时，Vue.js 做了专门的增强。表达式结果的类型除了字符串之外，还可以是对象或数组。

    // v-bind 绑定class和style时,不会覆盖原本的class和style, 而是和原本的内容进行拼接

 

    // 指令的常见格式:
    // v-指令名
    // v-指令名="指令值"
    // v-指令名:参数="指令值"   


    // 页面加载时进行初始化渲染
    var app = new Vue({  // 创建Vue实例
        el:"#app",   // 挂载的元素
        data:{ // 数据层 => 对应属性名将属性值 拼接到模版语法中

            isActive:true,   // 元素是否处于活跃状态   true => 新增class名active  false=>不新增

            styleStr:"color: red;text-align: center;line-height: 100px",

            // 对象
            styleObj:{
                // :style动态绑定对象 => 对象的键名就是css的属性名, 对象的健值就是css的属性值
                color:"red",
                textAlign:"center",
                "line-height":"100px"
            },

            styleList:[
                { color:"red",textAlign:"center","line-height":"100px"},
                { borderWidth:"1px",borderStyle:"solid",borderColor:"black"}
            ]

          
        }
    })


    // 在创建对象过程中 无法使用对象的原有的数据
    // var obj = {
    //     a: 1,
    //     // b: a + 1, // 此处a是一个变量 => 报错
    //     b: obj.a + 1  //  此处对象还为创建完毕,还没有赋值给变量obj ,无法使用obj
    // }









</script>

</html>